<template>
  <div>
    <div class="read-box">
      <div class="read-box-bg">
        <div class="read-content">
          <div class="read-content-title"></div>
          <div class="read-content-item">
            <ul class="read-content-list">
              <li class="read-content-list-unit read-content-unit-time">
                <div class="progress-mark progress-mark-amaz" v-if=" timeLength >= markShowValue[2].amazing"></div>
                <div class="progress-mark progress-mark-good"
                     v-if=" timeLength >= markShowValue[0].good && timeLength < markShowValue[1].great"></div>
                <div class="progress-mark progress-mark-great"
                     v-if="timeLength >=  markShowValue[1].great && timeLength < markShowValue[2].amazing"></div>
                <div class="progress-wrap">
                  <div class="progress-box">
                    <div class="progress-item-bg">
                      <div class="progress-item-active" v-bind:style="{'width':timeLength +'%'}">
                        <span class="progress-item-active-text"
                              v-bind:class="{'progress-active-text-color':timeLength < 45}">{{readData.myspeaktime}}分钟</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="progress-text">累计时长</div>
                <div class="progress-total">
                  <span class="progress-item-total-text">{{readData.classtime}}分钟</span>
                </div>
              </li>
              <li class="read-content-list-unit read-content-unit-day">
                <div class="progress-mark progress-mark-amaz" v-if=" dayLenght >= markShowValue[2].amazing"></div>
                <div class="progress-mark progress-mark-good"
                     v-if=" dayLenght >= markShowValue[0].good && dayLenght < markShowValue[1].great"></div>
                <div class="progress-mark progress-mark-great"
                     v-if="dayLenght >=  markShowValue[1].great && dayLenght < markShowValue[2].amazing"></div>
                <div class="progress-wrap">
                  <div class="progress-box">
                    <div class="progress-item-bg">
                      <div class="progress-item-active" v-bind:style="{'width':dayLenght+'%'}">
                        <span class="progress-item-active-text"
                              v-bind:class="{'progress-active-text-color':dayLenght < 30}">{{readData.mysign }}天</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="progress-text">累计打卡</div>
                <div class="progress-total">
                  <span class="progress-item-total-text">{{readData.classsign}}天</span>
                </div>
              </li>
              <li class="read-content-list-unit read-content-unit-star">
                <div class="progress-mark progress-mark-amaz" v-if=" starCount >= markShowValue[2].amazing"></div>
                <div class="progress-mark progress-mark-good"
                     v-if=" starCount >= markShowValue[0].good && starCount < markShowValue[1].great"></div>
                <div class="progress-mark progress-mark-great"
                     v-if="starCount >= markShowValue[1].great && starCount < markShowValue[2].amazing"></div>
                <div class="progress-wrap">
                  <div class="progress-box">
                    <div class="progress-item-bg">
                      <div class="progress-item-active" v-bind:style="{'width':starCount+'%'}">
                          <span class="progress-item-active-text"
                                v-bind:class="{'progress-active-text-color':starCount <30}">
                              <i class="progress-star-count"></i>
                            {{readData.mystar}}
                          </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="progress-text">累计星星</div>
                <div class="progress-total">
                   <span class="progress-item-total-text">
                     {{readData.classtar}}
                  <i class="progress-star-count"></i></span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--话算术-->
        <text-modal>
          <p slot="read-message-day" v-if="readData.flag==1">
            晨读打卡天数较少：您可以看到第一部分是关于晨读打卡的统计情况，这里分了两个部分，一个是孩子自身情况的反馈，一个是班级情况的说明；在晨读这部分，咱们家孩子目前是低于班级平均的，也就是说可能孩子每天开口、每天阅读的习惯养成还是有待加强的。这个可能是多方面的原因，您觉得孩子哪块觉得困难吗？
            <span class="message-text-distance">情况一：没有时间
            孩子这么忙啊，我也挺心疼她的。不过没有一件事儿是轻轻松松的，台上一分钟，台下十年功。前期的努力和坚持都是为了后期的轻松，一般时间紧张的话，建议您给孩子做一个时间学习表，规划一下，且晨读每天路上或者十几分钟就完成了，从习惯和效果来说对孩子却是终身的。希望您这边做好规划，让孩子按部就班来完成，当然我也会多多的鼓励她，监督她，让孩子追赶上大部队！
            </span>
            <span class="message-text-distance">
            情况二：想不起来
            孩子可能之前可能还没有接触过这样的学习方式，可能经常想不起来，这样的情况是很常见的，家长您也不用着急。之后可以每天给孩子设置一个闹钟，或者您帮孩子做好时间的规划，前期多提醒孩子，后面孩子习惯了就会好了。希望在您的鼓励下，孩子能够追赶上大部队，我还是很有信心的。
            </span>
            <span class="message-text-distance">
            情况三：不愿意打卡
            这种情况也是很常见的，一般有两个原因，一是还不太习惯用英语说话，二是对自己不太自信。其实孩子只有多开口说了，才能形成习惯、培养自信。这就需要我和家长您一起配合，多鼓励、多监督。我相信在我们的共同努力下，孩子一定会形成良好的习惯，以后也能成为勇敢大声说英语的孩子！
            </span>
          </p>
          <p slot="read-message-day" v-if="readData.flag==2">
            晨读打卡天数中等：
            您可以看到第一部分是关于晨读打卡的统计情况，这里分了两个部分，一个是孩子自身情况的反馈，一个是班级情况的说明；孩子在这部分做的还是很不错的，基本跟班级平均水平持平，能跟着大部队往前走。非常开心能看到他每一次的坚持。您也知道，语言的学习是一个不断积累的过程，咱们设置晨读打卡的目的就是为了让孩子养成每日开口、每日阅读的好习惯。以孩子目前的潜力来说，她是能够远超班级平均的，希望您多多鼓励并规划好孩子的时间，我也会多鼓励孩子，这种每天学习的习惯是能够受益终生的，相信在咱网校系统化学习的带领下，孩子一定会有更大的飞跃。
          </p>
          <p slot="read-message-day" v-if="readData.flag==3">
            晨读打卡天数高：
            您可以看到第一部分是关于晨读打卡的统计情况，这里分了两个部分，一个是孩子自身情况的反馈，一个是班级情况的说明；孩子在这部分做的非常棒，累计打卡天数远超班级平均水平，说明咱孩子在网校的学习中已经基本养成了持之以恒、坚持不懈的好习惯，语言的学习是一个不断积累的过程，这对孩子学习效果的提升是特别重要的。之后希望您能继续鼓励孩子每天阅读、每天开口，给其他同学做好榜样。相信在网校的系统化学习的带领之下，孩子这种良好的学习习惯会受益终生的！
          </p>
        </text-modal>
      </div>
    </div>
  </div>
</template>
<script>
  import TextModal from '@/components/textModal'

  export default {
    props: ['readData'],
    data () {
      return {
        markShowValue: [  // 标志出现的标准值
          {
            good: 60
          }, {
            great: 70
          }, {
            amazing: 80
          }
        ]
      }
    },
    components: {
      TextModal
    },
    computed: {
      timeLength () {
        return this.readData.myspeaktime / this.readData.classtime * 100
      },
      dayLenght () {
        return this.readData.mysign / this.readData.classsign * 100
      },
      starCount () {
        return this.readData.mystar / this.readData.classtar * 100
      }
    }
  }
</script>

<style type="text/css" scoped>
  .read-sum-text {
    display: block;
  }

  .progress-star-count {
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    font-style: normal;
    background: url("../assets/img/star_w.png") no-repeat;
    background-size: 100% 100%;
  }

  .progress-item-total-text {
    display: block;
    color: #fff;
    text-align: left;
    padding-left: 0.14rem;
    line-height: 0.4rem;
    font-size: 0.2rem;
  }

  .progress-total {
    float: left;
    width: 2.48rem;
    height: 0.4rem;
    background: linear-gradient(left, #ffdd00, #fd8f00);
    border-radius: 0.2rem;
    margin-top: 0.46rem;
  }

  .progress-text {
    float: left;
    margin: 0.46rem 0.1rem 0 0.1rem;
  }

  .progress-mark-good {
    margin-left: .3rem;
    width: 1.03rem;
    background: url("../assets/img/stage_good.png") no-repeat;
    background-size: 100% 100%;
  }

  .progress-mark-great {
    margin-left: .3rem;
    width: 1.03rem;
    background: url("../assets/img/stage_great.png") no-repeat;
    background-size: 100% 100%;
  }

  .progress-mark-amaz {
    margin-right: 1.2rem;
    width: 1.44rem;
    background: url("../assets/img/stage_amazing.png") no-repeat;
    background-size: 100% 100%;
  }

  .progress-mark {
    position: absolute;
    top: 0;
    left: 0;
    height: 0.4rem;
    font-size: 0.24rem;

  }

  .progress-item-active-text {
    display: block;
    color: #fff;
    text-align: right;
    padding-right: 0.14rem;
    line-height: 0.4rem;
    font-size: 0.2rem;
  }

  .progress-item-active {
    position: absolute;
    right: 0;
    /*width: 1.96rem;*/
    height: 0.4rem;
    background: linear-gradient(right, #ffdd00, #fd8f00);
    border-radius: 0.2rem;
  }

  .progress-item-bg {
    position: relative;
    width: 2.48rem;
    height: 0.4rem;
    background-color: #ffecd3;
    border-radius: 0.2rem;
  }

  .progress-box {
    padding-left: 0.25rem;
    width: 100%;
    box-sizing: border-box;
  }

  .progress-wrap {
    float: left;
    width: 2.7rem;
    margin-top: .46rem;
  }

  .read-content-list-unit {
    padding-bottom: .3rem;
    position: relative;
    overflow: hidden;
  }

  .read-content-list {
    width: 100%;
  }

  .read-content-item {
    width: 100%;
    padding: 0.18rem 0 0 0.24rem;
    font-size: 0.28rem;
    font-weight: 500;
    color: #333;
  }

  .read-content-title {
    margin: 0.2rem auto 0;
    width: 6.07rem;
    height: 1.75rem;
    background: url("../assets/img/stage_read.png") no-repeat;
    background-size: 100% 100%;
  }

  .read-content {
    padding-top: 1px;
    margin: 0 .2rem;
    height: 5.98rem;
    background: url("../assets/img/stage_unit_bg.png") repeat;
    background-size: 0.22rem 0.22rem;
    border-radius: 0.12rem;
    box-shadow: 0px 1px 3px -1px #999;
    box-sizing: border-box;
  }

  .read-box-bg {
    padding-top: 0.96rem;
    background: url("../assets/img/read_bg.png") no-repeat;
    background-size: 100% 0.5rem;
    box-sizing: border-box;
  }

  .read-box {
    width: 100%;
    padding-bottom: .5rem;
    box-sizing: border-box;
    background-color: #ffd22a;
  }

  .progress-active-text-color {
    text-align: right;
    width: 1.4rem;
    color: #e02727;
    position: absolute;
    right: 0;
  }
</style>

